<template>
    <div id="container" class="map-visual"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import axios from 'axios'
export default {
    data() {
        return {
            activeIcon: false,
            icon: require('@/assets/images/visual/map-icon.png'),
            iconActive: require('@/assets/images/visual/map-icon-active.png'),
        }
    },
    props: {
        mapData: {
            type: Array,
            default: () => []
        }
    },
    mounted() {
        this.initAMap();
    },
    unmounted() {
        this.map?.destroy();
    },
    methods: {
        initAMap() {
            window._AMapSecurityConfig = {
                securityJsCode: 'b04d89b2f4756e47232c4f4d3cd407cd',
            };
            AMapLoader.load({
                key: "49fe49410b4eaa9787ffca1564319615",
                version: "2.0",
                //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
                plugins: ["AMap.Scale"],
            })
                .then((AMap) => {
                    this.map = new AMap.Map("container", {
                        // 设置地图容器id
                        viewMode: "3D", // 是否为3D地图模式
                        zoom: 11, // 初始化地图级别
                        center: [116.397428, 39.90923], // 初始化地图中心点位置
                        mapStyle: "amap://styles/darkblue", //设置地图的显示样式
                    });
                    this.addMarker()

                    // 点击其他地方关闭弹窗
                    this.map.on("click", (e) => {
                        //关闭信息窗体
					    this.closeInfoWindow()
                        this.activeIcon = false
                    })
                    
                })
                .catch((e) => {
                    console.log(11, e);
                });
        },
        addMarker() {
            // let obj = {
            //     img: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            //     hotelName: '麦客达温德姆酒店',
            //     num: 1,
            //     num2: 2,
            //     personName: '黄灿灿',
            //     cardId: '511323200811022669',
            //     phone: '15213065988',
            //     address: '重庆市巴南区李家沱融汇大道1号'
            // }
            // 创建自定义图标
            let icon1 = new AMap.Icon({
                size: new AMap.Size(45, 70),
                image: this.icon,
                imageSize: new AMap.Size(45, 70)
            });

            let icon2 = new AMap.Icon({
                size: new AMap.Size(45, 70),
                image: this.iconActive,
                imageSize: new AMap.Size(45, 70)
            });
            if (this.mapData && this.mapData.length > 0) {
                let newMarker = []
                this.mapData.forEach(v => {
                    let marker = new AMap.Marker({
                        icon: icon1,
                        position: v.coordinate.split(","),
                        offset: new AMap.Pixel(-13, -30),
                        label: {
                            content: `
                                    <div class="visual-label">
                                        <div class="title">${v.shop_name}</div>
                                    </div>`,
                            offset: new AMap.Pixel(0, -10),
                            direction: 'top'
                        },
                    });
                    marker.on("click", (e) => {
                        if (marker.getIcon() === icon1) {
                            marker.setIcon(icon2);
                        }else{
                            marker.setIcon(icon1);
                        }
                        this.activeIcon = true
                        axios.get('/api/olroom/backend/public/index.php/admin/screen/index/business_info', {params: {id: v.id}}).then(res => {
                            if (res.status == 200 && res.data.error == 0) {
                                this.closeInfoWindow()
                                this.setInfoWindow(e, marker, res.data.data)
                            }
                        })
                    })
                    this.map.add(marker);
                    this.map.on('click', () => {
                        // 将覆盖物恢复到初始状态
                        marker.setIcon(icon1);
                    });
                    newMarker.push(marker)
                });
                this.map.setFitView()
            }
        },
        setInfoWindow(e, marker, obj) {
            //实例化信息窗体
			var title = '',
				content = [];

			let a = `<div class="maptak">
				<div class="maptak-item">
					<div class="maptak-item-top">
                        <div class="top-left">
                            <img src="${obj.show_photo}""></img>
                        </div>
                        <div class="top-right">
                            <div class="top-hotel">${obj.shop_name}</div>
                            <div class="top-hotel-info">
                                <span class="info-txt">入住${obj.checkin_count}</span>/
                                <span class="info-txt">空闲${obj.free_count}</span>
                            </div>
                        </div>
                    </div>
                    <div class="maptak-item-bottom">
                        <div class="bottom-item">
                            <div class="img person"></div>
                            <div class="item-title">${obj.name}</div>
                        </div>
                        <div class="bottom-item">
                            <div class="img cardId"></div>
                            <div class="item-title">${obj.id_number}</div>
                        </div>
                        <div class="bottom-item">
                            <div class="img phone"></div>
                            <div class="item-title">${obj.mobile}</div>
                        </div>
                        <div class="bottom-item">
                            <div class="img address"></div>
                            <div class="item-title">${obj.address}</div>
                        </div>
                    </div>
				</div>
				
			</div>`

            content.push(a)

			// 详情
			this.details = new AMap.InfoWindow({
				isCustom: true, //使用自定义窗体
				content: this.createInfoWindow(title, content.join("<br/>")),
				offset: new AMap.Pixel(170, -50),
				direction: 'top',
				closeWhenClickMap: false,
			});
			// 打开信息窗体
			this.details.open(this.map, e.lnglat);
        },
        //构建自定义信息窗体
		createInfoWindow(title, content) {
			var info = document.createElement("div");
			info.className = "custom-info input-card content-window-card";

			// 定义中部内容
			var middle = document.createElement("div");

			middle.className = "info-middle";
			middle.style.backgroundColor = 'white';
			middle.innerHTML = content;

			var titleD = document.createElement("div");
			titleD.className = "clas";
			middle.appendChild(titleD);

			info.appendChild(middle);
			return info;
		},
		//关闭信息窗体
		closeInfoWindow() {
			this.map.clearInfoWindow();
		},
    },
};
</script>

<style scoped lang="less">
#container {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

/deep/ .amap-logo {
    display: none !important;
}
/deep/ .amap-copyright {
    opacity:0 !important;
}
.map-visual {
     /deep/ .amap-marker {
        .amap-icon {
            width: 45px;
            height: 70px;
            img {
                left: 0;
                width: 100%;
                height: 100%;
            }
        }
        .amap-marker-label {
            border: 0;
            background: transparent;
            .visual-label {
                height: 43px;
                padding: 0 5px;
                background: url('../../assets/images/visual/map-title-bg.png') no-repeat;
                background-size: contain;
                min-width: 180px;
                display: flex;
                align-items: center;
                .title {
                    width: 100%;
                    height: 29px;
                    background: linear-gradient( 90deg, #0B1228 0%, rgba(38,51,92,0) 100%);
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                    color: #BFDBEF;
                    line-height: 29px;
                    text-align: left;
                    padding: 5px
                }
            }
        }
    }
    /deep/ .amap-info-contentContainer {
        .info-middle {
            background: transparent !important;
        }
        .maptak {
            width: 322px;
            height: 206px;
            background: url('../../assets/images/visual/map-content-bg.png') no-repeat;
            background-size: contain;
            padding-top: 31px;
            padding-left: 21px;
            .maptak-item {
                height: 100%;
                .maptak-item-top {
                    display: flex;
                    .top-left {
                        width: 65px;
                        height: 45px;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                    .top-right {
                        margin-left: 10px;
                        .top-hotel {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 600;
                            font-size: 16px;
                            color: #FFFFFF;
                            line-height: 22px;
                        }
                        .top-hotel-info {
                            margin-top: 6px;
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #BFDBEF;
                            text-align: left;
                        }
                    }
                }
                .maptak-item-bottom {
                    margin-top: 12px;
                    .bottom-item {
                        margin-bottom: 8px;
                        display: flex;
                        align-items: center;
                        .img {
                            width: 12px;
                            height: 12px;
                            margin-right: 10px;
                            background-size: contain;
                            background-repeat: no-repeat;
                            &.person {
                                background-image: url('../../assets/images/visual/map-person-icon.png');
                            }
                            &.cardId {
                                background-image: url('../../assets/images/visual/map-id-icon.png');
                            }
                            &.phone {
                                background-image: url('../../assets/images/visual/map-phone-icon.png');
                            }
                            &.address {
                                background-image: url('../../assets/images/visual/map-adrees-icon.png');
                            }
                        }
                        .item-title {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 12px;
                            color: #FFFFFF;
                            text-align: left;
                        }
                    }
                }
            }
        }
    }
    
}
</style>